import React, {
  createRef,
  forwardRef,
  Fragment,
  useEffect,
  useImperativeHandle,
} from 'react';
import { Button } from 'antd';
import Info from '@/view/task/info';
import style from './index.module.less';
import { Link, Redirect, Route, Switch } from 'react-router-dom';
import type { RouteChildrenProps } from 'react-router-dom';
import RouterView from '@/router';
import routes from '@/router/taskinfo';
import { useAppDispatch, useAppSelector, AppDispatch } from '@/store';
import {
  removeTask,
  updateTask,
  getTaskListAsync,
} from '@/store/features/taskSlice';

// let {taskList} = useSelector(state=>state.task)
// dispatch = useDispatch
// document.documentElement.classList.remove("dark");

const Task: React.FC = (props) => {
  let { taskList } = useAppSelector((state) => state.task);
  const dispatch = useAppDispatch();
  // const res =  createRef()每次组件更新都创建一个新的ref对象出来   useRef(null) 不会创建新的

  const changeColor = () => {
    // document.documentElement.style.setProperty('--microjz-main-color-background', '#181818');
    const { history } = props as RouteChildrenProps;
    history.push('/task/info?name=123');
  };

  // forwardRef(Task)
  // useImperativeHandle(ref,()=>{
  //   // 暴露给父组件的状态和方法
  // })
  // useMemo 用法类似 computed useMemo(()=>{},[依赖])
  // useCallback useCallback(()=>{},[]) // 依赖变化或组件首次进入则创建函数防止组件多次渲染方法多次创建
  // 父组件传递给子组件的方法用 useCallback 包裹一下并且子组件 使用useMemo包裹子组件可以作用父子组件优化
  // useTransform 渲染中断

  useEffect(() => {
    (async () => {
      dispatch(getTaskListAsync());
    })();
  }, [dispatch]);

  useEffect(() => {
    console.log(taskList);
  }, [taskList]);

  return (
    <Fragment>
      <Button onClick={changeColor}>按钮</Button>
      <div className={style.task}>123 </div>
      <Link to="/task/info">info</Link>
      {/* <Switch>
          <Redirect exact from="/task" to="/task/info"></Redirect>
          <Route path="/task/info" component={Info}></Route>
        </Switch> */}
      <RouterView routes={routes}></RouterView>
    </Fragment>
  );
};

export default Task;
